import React, { useState } from 'react'
import { useNavigate, Outlet } from 'react-router-dom'
import { Button, List, Image, Toast, Card, Tag, NavBar, CapsuleTabs, Badge } from 'antd-mobile'
function Index() {
    let navigate = useNavigate()
    const [collectList, setcollectList] = useState(JSON.parse(localStorage.getItem('collectList')) || [])
    console.log(collectList);
    const handelorder=(id)=>{
        navigate('/order',{state:id})

    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}><h2>我的预定</h2></NavBar>

            <div style={{ marginLeft: '20px' }}>
                <Tag round style={{ fontSize: 18, color: '#000', background: '#fff', marginLeft: '20px' }}>
                    活动状态
                </Tag>
                <Tag round style={{ fontSize: 18, color: '#000', background: '#fff', marginLeft: '20px' }}>
                    活动时间
                </Tag>
                <Tag round style={{ fontSize: 18, color: '#000', background: '#fff', marginLeft: '20px' }}>
                    已使用
                </Tag>
            </div>

            <List >
                {collectList.length > 0 && collectList.map((item, ind) => (
                    <List.Item
                    onClick={()=>handelorder(item.id)}
                        key={ind}
                        prefix={
                            <Image
                                src={item.image}
                                style={{ borderRadius: 20 }}
                                fit='cover'
                                width={80}
                                height={80}
                            />
                        }
                        description={<div>
                            {item.date}
                        </div>}
                    >
                        
                            <p style={{backgroundColor:'#eee',marginLeft:'180px',color:'purple' }}>已使用</p>
                            {item.title}
                            <p>价格￥{item.price}</p>
                     


                    </List.Item>
                ))}
            </List>

        </div>
    )
}

export default Index

